<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-23 10:15:33
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-11 10:00:26
 * @FilePath: \cxl-h5\src\pages\personalCenter\wallet\record\Index.vue
-->
<template>
    <section class="record">
        <section class="tab"><Tab :list="data.tabList" @change="data.onSelect" /></section>
        <section class="list">
            <van-pull-refresh
                v-model="data.refreshLoading"
                @refresh="data.onRefresh"
                class="list-main van-list-container"
            >
                <van-list
                    v-model:loading="data.dataLoading"
                    :finished="data.dataFinished"
                    :finished-text="data.consumeList.length || data.payList.length || data.refundList.length ? '' : ''"
                    @load="data.onLoad"
                    loading-text=" "
                >
                    <transition name="componentFade" mode="out-in">
                        <!-- 消费 -->
                        <template v-if="data.type === 'CONSUME'">
                            <List :list="data.consumeList" type="CONSUME" :emptyStatus="data.consumeNone" />
                        </template>
                        <!-- 充值 -->
                        <template v-else-if="data.type === 'PAY'">
                            <List :list="data.payList" type="PAY" :emptyStatus="data.payNone" />
                        </template>
                        <!-- 退款 -->
                        <template v-else-if="data.type === 'REFUND'">
                            <List :list="data.refundList" type="REFUND" :emptyStatus="data.refundNone" />
                        </template>
                    </transition>
                </van-list>
            </van-pull-refresh>
        </section>
    </section>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import Tab from '@/components/Tab.vue'
import List from './List.vue'
import { WalletRecord } from '.'

const data = reactive(new WalletRecord())
</script>

<style scoped lang="scss">
.record {
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .tab {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
    }
    .list {
        height: 100%;
        box-sizing: border-box;
    }
    .list-main {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;

        padding-top: calc(var(--cxl-size-10) + var(--cxl-size-40));
    }
}
</style>
